<template>
  <div class="concatUs">
    <img :src="img_src"/>
    <el-form class="" :style="'min-height:' +minHeight + 'px'"  :rules="rules" :model="form" ref="form"  v-show="!isSubmit">
      <div class="module_title">
        <p class="module_title_t">How can we help you?</p>
        <p class="module_title_s">Please select the subject that you would like for help.</p>
      </div>
      <!-- 第一页 -->
      <div class="module_form" v-show="curForm == 0"> 
        <p class="module_form_label">
          <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg>
         
          <span>Subject</span> 
        </p>
        <el-form-item  prop="issue"> 
          <el-select v-model="form.issue" popper-class="select_contactus" placeholder="Please select a subject." clearable  @change="setTopixType" > {{item}}
            <el-option v-for="item in subjectList" :key="item.label" :value="item.value" v-html="item.label"></el-option>
          </el-select>
        </el-form-item>
        <div class="btn_module">
          <el-button :type="isStep1Finish ? 'active': 'disabled'" @click="isStep1Finish && nextForm()">Next</el-button>
        </div>
        
      </div>
      <!--选了第一个问题 -->
      <div class="module_form" v-show="curForm ==1 && curIssue == 0">
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Which Product did you purchase?</span>
        </p>
        <el-form-item  prop="purchased_item">
          <el-select  v-model="form.purchased_item" placeholder="Which Product did you purchase?" clearable  >
            <el-option v-for="item in purchaseProductList" :key="item.id" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
         <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Purchased within 30 days?</span>
        </p>
        <el-form-item  prop="is_buy_thirty_day">
          <el-select  v-model="form.is_buy_thirty_day" placeholder="Purchased within 30 days?" clearable  >
            <el-option v-for="item in isIn30DayList" :key="item.id" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Name</span>
        </p>
        <el-form-item  prop="name">
          <el-input  placeholder="Name" v-model="form.name"></el-input>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Email address</span>
        </p>
        <el-form-item  prop="email">
          <el-input  placeholder="Email address"  v-model="form.email"></el-input>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Order ID</span>
        </p> 
        <el-form-item  prop="order_no">
          <el-input  placeholder="Order ID"  v-model="form.order_no"></el-input>
        </el-form-item>
         <p class="module_form_label"> 
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Please decribe the problem you meet.</span>
        </p>
        <el-form-item  prop="description">
          <el-input  placeholder="Please decribe the problem you meet." resize="none" autosize  type="textarea"   v-model="form.description"></el-input>
        </el-form-item>

        <p class="module_form_label">
          <span>Upload image(s) (optional)</span>
        </p>
        <el-form-item  >
          <div class="image_div" >
            <el-upload  class="avatar-uploader el-image" :action="uploadImageUrl" accept=".png,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.gif " :data="uploadData"
              :show-file-list="false"   :on-success="handleImageSuccess" multiple :before-upload="beforeImageUpload">
            <div class="addimage">
              <svg class="svgNormal" >
                <use xlink:href="#icon-camera_add1"></use>
              </svg>
              <svg class="svgHover" >
                <use xlink:href="#icon-camera_add_hover"></use>
              </svg>
              
            </div>
            </el-upload>
            <div v-for="(item,index) in form.httpImage" :key="item">
              <el-image  :src="item"></el-image>
              <p @click="removeImage(index)">
                <svg class="svgNormal"  >
                  <use xlink:href="#icon-deleteimage_normal"></use>
                </svg>
                <svg class="svgHover"  >
                  <use xlink:href="#icon-deleteimage_hover"></use>
                </svg>
              </p>
            </div>
         
            <p class="clearBoth"></p>
          </div>
        </el-form-item>
        <p class="module_form_label">
          <span>S/N Code (optional)</span>
        </p>
        <el-form-item >
          <el-input  placeholder="S/N Code (optional)" v-model="form.sn_code"></el-input>
        </el-form-item>
        <p class="module_form_label">
          <span>Case ID (optional)</span>
        </p>
        <el-form-item  >
          <el-input  placeholder="Case ID (optional)" v-model="form.case_id"></el-input>
        </el-form-item>
        <div class="btn_module">
           <el-button class="next" @click="backTo" >Back</el-button>
          <el-button  class="submit" :loading="isRequest" :type="isFormFinish(form1, 0) ? 'active': 'disabled'" @click="isFormFinish(form1, 0) && submitData()">Submit</el-button>
        </div>

        
      </div>
      <!--选了第二个问题 --> 
      <div class="module_form"  v-show="curForm ==2 && curIssue == 1">
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Where did you know bonoch from?</span>
        </p>
        <el-form-item  prop="where_did_you_know_bonoch_from">
          <el-select  v-model="form.where_did_you_know_bonoch_from" placeholder="Where did you know bonoch from?" multiple clearable  >
            <el-option v-for="item in knowBonochList" :key="item.id" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Which Product are you interested in?</span>
        </p>
        <el-form-item  prop="which_product_are_you_interesed">
          <el-select  v-model="form.which_product_are_you_interesed" placeholder="Which Product are you interested in?"  clearable  >
            <el-option v-for="item in interestedProductList" :key="item.id" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Name</span>
        </p>
        <el-form-item  prop="name">
          <el-input  placeholder="Name" v-model="form.name"></el-input>
        </el-form-item>
          <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Email address</span>
        </p>
        <el-form-item  prop="email">
          <el-input  placeholder="Email address"  v-model="form.email"></el-input>
        </el-form-item>
        <p class="module_form_label">
          <span>Order ID (optional)</span>
        </p> 
        <el-form-item  >
          <el-input  placeholder="Order ID (optional)"  v-model="form.order_no"></el-input>
        </el-form-item>
          <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>What information do you need?</span>
        </p> 
        <el-form-item  prop="description">
          <el-input  placeholder="What information do you need?" resize="none" autosize  type="textarea"    v-model="form.description"></el-input>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Would you like to subscribe to bonoch?</span>
        </p>
        <el-form-item  prop="would_you_like_to_subscribe_to_bonoch"> 
          <el-select  v-model="form.would_you_like_to_subscribe_to_bonoch" placeholder="Would you like to subscribe to bonoch?"  clearable  >
            <el-option v-for="item in isIn30DayList" :key="item.id" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <div class="btn_module">
          <el-button class="next" @click="backTo">Back</el-button>
          <el-button  class="submit"  :loading="isRequest" :type="isFormFinish(form2, 1) ? 'active': 'disabled'" @click="isFormFinish(form2, 1) && submitData()">Submit</el-button>
        </div>
        
      </div>

        <!--选了第三个问题 -->
      <div class="module_form"  v-show="curForm ==3 && curIssue == 2">
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Name</span>
        </p>
        <el-form-item  prop="name">
          <el-input  placeholder="Name" v-model="form.name"></el-input>
        </el-form-item>
          <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Email address</span>
        </p>
        <el-form-item  prop="email">
          <el-input  placeholder="Email address"  v-model="form.email"></el-input>
        </el-form-item>
        <p class="module_form_label">
          <span>Order ID (optional)</span>
        </p> 
        <el-form-item >
          <el-input  placeholder="Order ID"  v-model="form.order_no"></el-input>
        </el-form-item>
        <p class="module_form_label">
          <span>Upload image(s)</span>
        </p>
        <el-form-item  >
          <div class="image_div" >
            <el-upload  class="avatar-uploader el-image" :action="uploadImageUrl" accept=".png,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.gif "  :data="uploadData"
              :show-file-list="false"   :on-success="handleImageSuccess" multiple :before-upload="beforeImageUpload">
            <div class="addimage">
              <svg class="svgNormal" >
                <use xlink:href="#icon-camera_add1"></use>
              </svg>
              <svg class="svgHover" >
                <use xlink:href="#icon-camera_add_hover"></use>
              </svg>
              
            </div>
            </el-upload>
            <div v-for="(item,index) in form.httpImage" :key="item">
              <el-image  :src="item"></el-image>
              <p @click="removeImage(index)">
                <svg class="svgNormal"  >
                  <use xlink:href="#icon-deleteimage_normal"></use>
                </svg>
                <svg class="svgHover"  >
                  <use xlink:href="#icon-deleteimage_hover"></use>
                </svg>
              </p>
            </div>
         
            <p class="clearBoth"></p>
          </div>
        </el-form-item>
        <p class="module_form_label">
         <svg class="icon-Required"  >
            <use xlink:href="#icon-Required"></use>
          </svg><span>Message</span>
        </p> 
        <el-form-item  prop="description">
          <el-input  placeholder="Message" resize="none" type="textarea" autosize   v-model="form.description"></el-input>
        </el-form-item>
        <div class="btn_module">
          <el-button class="next" @click="backTo" >Back</el-button>
          <el-button  class="submit" :loading="isRequest" :type="isFormFinish(form3, 2) ? 'active': 'disabled'" @click="isFormFinish(form3, 2) && submitData()">Submit</el-button>
        </div>
        
      </div>

      <div class="module_link"> 
          <p><a href="/warranty" class="color6size14">{{$t('CONTACTUS.REGISTERYOURPRODUCT')}}</a></p>
          <p><a href="/warrantyPolicy" class="color6size14">View our full Warranty Policy</a></p>
      </div>
    </el-form>
    <div class="form_success" v-show="isSubmit"  :style="'min-height:' +minHeight + 'px'">
      <div>
        <svg class="svgNormal" >
          <use xlink:href="#icon-success"></use>
        </svg>
        <p class="form_success_t">We’ve received.</p>
        <p class="form_success_tip">Thank you! We will get back to you in 24 hours. Please check your email inbox for further details.</p>

      </div>
   
    </div>
  </div>
</template>

<script>
import { contactUsForm } from '@/api/contactUs/index'
import { randomString } from '@/utils/index'
import { mapGetters } from 'vuex'
import md5 from 'js-md5';
export default {
  data(){
    return{
      img_src: require("@/assets/concatUs.png"),
      form:{
        issue: '',
        name: '',
        is_buy_thirty_day: '',
        email: '',
        order_no: '',
        httpImage: [],
        case_id: '',
        description: '',
        purchased_item:'',
        which_product_are_you_interesed: '',
        where_did_you_know_bonoch_from: '',
        would_you_like_to_subscribe_to_bonoch: '',
        image: []
       
      },
      curIssue: '',
      isSubmit: false, // 提交是否成功
      curForm: 0,
      uploadImageUrl: '/api/front/general/upload',
      uploadData: {
        imagewidth: '',
        imageheight: '',
        type: 'after_sale',
        r: '',
        p:''
      },
      form1: ['purchased_item', 'is_buy_thirty_day', 'name', 'email', 'order_no', 'description'],
      form2: ['where_did_you_know_bonoch_from', 'which_product_are_you_interesed', 'name', 'email', 'description', 'would_you_like_to_subscribe_to_bonoch'],
      form3: ['name', 'email', 'description'],
      isRequest: false,
      minHeight: 400,
      
    }
  },
  computed: {
    ...mapGetters([ 'isPhone']),
    subjectList(){
      return [
          {value: 'My item is defective.', label: 'My item is defective.' },
          {value: 'I am interested in bonoch. I need more information.', label: 'I am interested in bonoch. I need more information.' },
          {value: 'I just want to get in touch.', label:'I just want to get in touch. '},
        ]
    }, 
    isIn30DayList () {
      return [
        {value: 'Yes', label: 'Yes'},
        {value: 'No', label: 'No'},
      ]
    },
    purchaseProductList () {
      return [
        {value: 'Baby monitor', label: 'Baby monitor'},
        {value: 'Video doorbell', label: 'Video doorbell'},
        {value: 'Smart curtain robot', label: 'Smart curtain robot'},
        
      ]
    },
    interestedProductList () {
       return [
        {value: 'Baby monitor', label: 'Baby monitor'},
        {value: 'Video doorbell', label: 'Video doorbell'},
        {value: 'Smart curtain robot', label: 'Smart curtain robot'},
        {value: 'Just bonoch', label: 'Just bonoch'},
      ]
    },
    knowBonochList (){
      return [
        {value: 'Amazon', label: 'Amazon'},
        {value: 'Family or friends', label: 'Family or friends'},
        {value: 'Meida', label: 'Meida'},
        {value: 'Influencer', label: 'Influencer'},
        {value: 'bonoch social media', label: 'bonoch social media'},
        {value: 'Kickstarter/Indiegogo', label: 'Kickstarter/Indiegogo'},
        {value: 'Other', label: 'Other'},
      ]
    },
    isStep1Finish () {
      let isFull = true
      
      if (this.form.issue.length > 0 && this.curForm === 0 ) {
        this.$refs.form.validateField('issue', (msg)=>{
          isFull = isFull && !msg
        })
      }else {
        isFull = false
      }
      return isFull
    },

    rules () {
      return {
        issue:[  { required: true, trigger: 'blur', message: this.$t('CONTACTUS.SELECTASUBJECT') }],
        name: [ { required: true, trigger: 'change',message: this.$t('CONTACTUS.ENTERNAME')  }, ],
        email: [
          { required: true, trigger: 'change', message: this.$t('CONTACTUS.ENTEREMAILADDRESS') },
          { type: 'email',  trigger: ['blur', 'change'], message: this.$t('CONTACTUS.ENTEREMAILADDRESS') }
        ],
        order_no: [  { required: true, trigger: 'change' ,message: this.$t('CONTACTUS.ENTERAMAZONORDERID')},  ],
        description: [  { required: true, trigger: 'change', message: this.$t('CONTACTUS.TELLUSMOREINFO')}, ],
        postal_code: [    { required: true, trigger: 'change' ,message: this.$t('CONTACTUS.ENTERPOSTALCODE')}, ],
        is_buy_thirty_day: [ { required: true, trigger: 'change' },  ],
        purchased_item: [ { required: true, trigger: 'change' },  ],
        where_did_you_know_bonoch_from: [{ required: true, trigger: 'change' }, ],
        which_product_are_you_interesed: [{ required: true, trigger: 'change' }, ],
        would_you_like_to_subscribe_to_bonoch: [{ required: true, trigger: 'change' }, ],
      }  
    },
  },


  mounted(){
    this.$nextTick(()=>{
      this.setHeight()
    })
  },
  methods: {
    setHeight(){     
      let main = document.getElementsByClassName("main")
      if(main && main.length>0){
        let minHeight = parseInt(main[0].style.minHeight)  || 0 
        if(minHeight) {
          if(this.isPhone){
            this.minHeight = minHeight - 80 - 40
          } else{
             this.minHeight = minHeight - 80 - 64
          }
        } else {
          let timer =  setTimeout(()=>{
            this.setHeight()
              clearTimeout(timer)
          },3000)
        }
      }
    },
    isFormFinish (array, curIssue){ // 校验
      let isFull = false 
      if (this.curForm !== 0 && this.curIssue === curIssue) {
        let arrayFilter = Object.keys(this.form).filter((key)=>{
          return array.indexOf(key) > -1 && this.form[key] && (this.form[key].length > 0)
        })
        if(arrayFilter.length == array.length ){
          let isRight = true
          this.$refs.form.validateField(array, (msg)=>{
            isRight =  isRight && !msg
          })
          isFull = isRight
        }
        
      }else {
        isFull = false
      }
      return isFull
    },
    setTopixType (value) {
      for(let i = 0; i < this.subjectList.length; i++ ){
        if(this.subjectList[i].value == value) {
          this.curIssue = i
        }
      }
      let issue = this.form.issue
      this.$refs.form.resetFields()
      this.form.issue = issue
    },
    backTo (){
      this.curForm =  0
     
    },
    nextForm (){
      this.curForm =  this.curIssue + 1
      this.$refs.form.clearValidate()
    },
    handleImageSuccess (response) {
      this.form.image.push(response.data.filePathName)
      this.form.httpImage.push(this.utils.setCdnUrl() + response.data.filePathNameHttp)
    },
     setRP () {
      let timestamp = new Date().getTime()
      timestamp = timestamp.toString().substring(0, 10)
      let r = timestamp + randomString(22)
      let p = md5(r)
      p = md5(p+r)
      let obj = {
        r: r,
        p: p
      }
      return obj
    },
    beforeImageUpload (file) {
      let that = this
      let type = ['image/png', 'image/jpg', 'image/jpeg', 'image/jfif', 'image/pjpeg', 'image/pjp', 'image/gif' ]
      if(type.indexOf(file.type) == -1 ){
        this.$message.error("仅支持.png/.jpg/.jpeg/.jfif/.pjpeg/.pjp/.gif格式的图片")
        return false
      }
      let obj = this.setRP()
      that.uploadData.r = obj.r 
      that.uploadData.p = obj.p

      const isSize = new Promise(function(resolve, reject){
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = true
          valid ? resolve() : reject();
          that.uploadData.imagewidth = img.width
          that.uploadData.imageheight = img.height
        }
        img.src = _URL.createObjectURL(file);
      }).then(()=>{
        return file
      }, ()=>{
        return Promise.reject()
      })
      return isSize
     
    },

    submitData (){
      let obj = this.setRP()
      this.form.r = obj.r;
      this.form.p = obj.p;
      let params = this.form
      this.isRequest = true
      contactUsForm(params).then((res)=>{
        if(res.state == 1){
          this.isSubmit = true
        }
        this.isRequest = false
        

      })
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/support/contactUs.scss';
</style>